<template>
<!--  <div class="top">-->
<!--    <div class="title">JJY_BLOG</div>-->
<!--    <div class="mune">-->
<!--      <div style="background-color: red;width: 20px;height:20px;"/>-->
<!--    </div>-->
<!--  </div>-->

  <mu-appbar style="width: 100%;height:120px;background-color: #424242;justify-content: space-between;" color="primary">
    <div slot="left" style="color: #409eff;font-size:80px;padding-left:20px;">JJY_BLOG</div>
    <div style="display:flex; justify-content: center;align-items: center;">
      <div style="width:100%;height:100%;text-align: right;padding-right:30px;">
        <mu-button @click="goToSearch" style="height:100px;line-height:100px;background-color: #424242;">
          <i class="iconfont icon-sousuo" style="color:white;"></i>
        </mu-button>
      </div>
      <mu-menu slot="right">
        <mu-button flat>
          <i class="iconfont icon-caidan"></i>
        </mu-button>
        <mu-list slot="content" style="width:250px;padding-top: 30px;">
          <mu-list-item button style="height:80px;line-height:80px;" @click="go1">
            <mu-list-item-content>
              <mu-list-item-title style="font-size:30px;height:80px;line-height:80px;" ><i class="iconfont icon-shouye" />&nbsp;首页</mu-list-item-title>
            </mu-list-item-content>
          </mu-list-item>
          <mu-list-item button style="height:80px;line-height:80px;" @click="go2">
            <mu-list-item-content>
              <mu-list-item-title style="font-size:30px;height:80px;line-height:80px;" ><i class="iconfont icon-ai-kind" />&nbsp;分类专栏</mu-list-item-title>
            </mu-list-item-content>
          </mu-list-item>
          <mu-list-item button style="height:80px;line-height:80px;" @click="go3">
            <mu-list-item-content>
              <mu-list-item-title style="font-size:30px;height:80px;line-height:80px;"><i class="iconfont icon-24gf-tags" />&nbsp;标签</mu-list-item-title>
            </mu-list-item-content>
          </mu-list-item>
          <mu-list-item button style="height:80px;line-height:80px;" @click="go4">
            <mu-list-item-content>
              <mu-list-item-title style="font-size:30px;height:80px;line-height:80px;"><i class="iconfont icon-liuyan" />&nbsp;留言板</mu-list-item-title>
            </mu-list-item-content>
          </mu-list-item>
          <mu-list-item button style="height:80px;line-height:80px;" @click="go5">
            <mu-list-item-content>
              <mu-list-item-title style="font-size:30px;height:80px;line-height:80px;"><i class="iconfont icon-lianjie" />&nbsp;友链</mu-list-item-title>
            </mu-list-item-content>
          </mu-list-item>
          <mu-list-item button style="height:80px;line-height:80px;" @click="go6">
            <mu-list-item-content>
              <mu-list-item-title style="font-size:30px;height:80px;line-height:80px;"><i class="iconfont icon-lianxiren" />&nbsp;联系作者</mu-list-item-title>
            </mu-list-item-content>
          </mu-list-item>
        </mu-list>
      </mu-menu>
    </div>
  </mu-appbar>
</template>

<script>
export default {
  name: "Top",
  data() {
    return {
      visible:false,
    };
  },
  methods: {
    goToSearch(){
      this.$router.push('/search')
    },
    go1(){
      this.$router.push('/')
    },
    go2(){
      this.$router.push('/type')
    },
    go3(){
      this.$router.push('/tag')
    },
    go4(){
      this.$router.push('/message')
    },
    go5(){
      this.$router.push('/links')
    },
    go6(){
      this.$router.push('/author')
    },
  }
}
</script>

<style scoped>
.top{
  width: 100%;
  height: 130px;
  background-color: #424242;
  display:flex;
  justify-content: space-between;
  align-items: center;
}
.title{
  color: #409eff;
  font-size: 80px;
  padding-left: 2%;
  height:130px;
  line-height: 130px;
}

.mune{
  background-color: yellow;
  width:20%;
  height:100%;
}

</style>